<template>
  <div class="datapagerEl" style="height: 50px">
    <div class="datapagerEl_1">
      <button :disabled="btnStateMinus" class="datapagerEl_1_btn1" @click="handleMinus">上一页</button>
      <p>{{ pages }}</p>
      <button :disabled="btnStateAdd" class="datapagerEl_1_btn2" @click="handlepagAdd">下一页</button>
    </div>

    <div class="datapagerEl_2">
      <p>共 <span>{{ props.msg.total }}</span> 条</p>
    </div>

    <div class="datapagerEl_3">
      <apan>跳至</apan>
      <el-input v-model="pages" placeholder="1" style="height: 25px;width: 30px" class="datapagerEl_3_input"/>
      <span>页</span>
    </div>

    <div class="datapagerEl_3">
      <el-button class="datapagerEl_3_Btn" @click="ensure">确定</el-button>
    </div>

    <div class="datapagerEl_4">
      <el-dropdown @command="handlePag">
        <el-button type="primary">
          {{ total }}条/页 <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command=5>5条/页</el-dropdown-item>
            <el-dropdown-item command=10>10条/页</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch } from "vue";
import service from "@/api";
import {ElNotification} from "element-plus";


const emits = defineEmits(['pagAffirm','pag','pagAdd','pagReduce','pagSkip'])

let pages = ref(1) // 当前页
let total = ref(5) // 条数
let sumPages = ref() // 总条数

// 接收父组件传来的pag信息
const props = defineProps({
  msg: Object
})

// 按钮禁用
let btnStateMinus = ref(true)
let btnStateAdd = ref(false)
watch(pages,()=>{
  if(pages.value <= 1){
    btnStateMinus.value = true
  } else {
    btnStateMinus.value = false
  }
  if(pages.value>= props.msg!.pages){
    btnStateAdd.value = true
  } else {
    btnStateAdd.value = false
  }
})


// 下拉功能
let pagingData = {total: total.value, pages: pages.value}
function handlePag(command: number) {
  total.value = command
  pagingData = { total: total.value, pages: pages.value}
  // 定义触发事件名，数据
  emits('pag', pagingData)
}

// 页码+1
function handlepagAdd() {
  if(pages.value>= props.msg!.pages){
    pages.value = props.msg!.pages
    return
  } else {
    pages.value++
    pagingData = { total: total.value, pages: pages.value+1}
    emits('pagAdd', pagingData)
  }
}
// 页码-1
function handleMinus() {
  if(pages.value<=1){
    pages.value = 1
    return
  } else {
    pages.value--
    pagingData = { total: total.value, pages: pages.value}
    emits('pagReduce', pagingData)
  }
}

// 确定功能
function ensure() {
  if(pages.value < 1 && typeof pages.value === "number"){
    ElNotification.error({ message: '跳转页数不能为0,负数,非数字' })
  } else if (pages.value > props.msg!.pages) {
    ElNotification.error({ message: `当前总页数为：${props.msg!.pages}页` })
    pages.value = props.msg!.pages
  } else {
    pagingData = { total: total.value, pages: pages.value+1}
    emits('pagSkip', pagingData)
  }
}
</script>

<style scoped>
@import url('@/style/paging.css');
</style>
